import React, { Component } from 'react';
import { Input } from 'antd';

const { TextArea } = Input;

class TabTextareaDemo extends Component {
  state = {
    value: '',
  };

  handleKeyDown = event => {
    const { value } = this.state;
    if (event.keyCode === 9) {
      // tab was pressed
      event.preventDefault();
      const val = value;
      const start = event.target.selectionStart;
      const end = event.target.selectionEnd;
      this.setState(
        {
          value: `${val.substring(0, start)}\t${val.substring(end)}`,
        },
        // () => {
        //   this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1;
        // },
      );
    }
  };

  render() {
    const { value } = this.state;

    return (
      <div>
        <TextArea
          onChange={e => {
            this.setState({
              value: e.target.value,
            });
          }}
          value={value}
          onKeyDown={e => {
            if (e.keyCode === 9) {
              e.preventDefault();
            }

            console.log(e.keyCode);
          }}
        ></TextArea>
      </div>
    );
  }
}

export default TabTextareaDemo;
